<style>
.wrap1{
    background:url('/images/site_image/bg1.jpg');
    background-size:100% 100%;
}
.catalogTitle {
    width: 400px;
    margin:10px 168px;
    background:rgba(0,0,0,0.6);
    border-radius: 10px;
    height:46px; line-height:46px;
}
.catalogTitle h3 {
    font-size:24px;
    color:#fff;
    text-align: center;
}
</style>
<?php
$db = new DBQuery;
$sql = 'SELECT * FROM categories LIMIT 0,4;';
$catalogs = $db->query($sql);
if($catalogs){
?>
<div class="catalogTitle">
    <h3>Thương hiệu</h3>
</div>
<div class="catalogCt fl">
    <div class="catalogList">
    	<ul>
        <?php foreach($catalogs as $cat):?>
    		<li data-cat-id="<?php echo $cat['cat_id']?>" class="menu_cat">
    			<div class="poster_film">
    				<a href="<?=generate_cat_url('products',$cat)?>"><img src="/images/categories_image/<?php echo $cat['cat_image']?>"/></a>
    				<p><?php echo $cat['cat_name'] ?></p>
    			</div>
    		</li>
            <?php endforeach;?>
    	</ul>
    </div>
    <div class="bi_next"></div>
    <div class="catalogSp"></div>
</div>
<?php } ?>
<script>
$('.menu_cat').hover(function(){
	$(this).css('background','none repeat scroll 0 0 rgba(255, 255, 255, 0.9)');
	$(this).find('.poster_film p').slideDown('fast');
	
},function(){
	$(this).css('background','none repeat scroll 0 0 rgba(1, 1, 1, 0.5)');
	$(this).find('.poster_film p').slideUp('fast');
});

//Sự kiện click vào từng categories sản phẩm thì thu nhỏ ảnh categories lại và hiện ra div danh sách sản phẩm
//của categories đó
/*$('.menu_cat').click(function(){
    $('.catalogCt').css({
        'background':'rgb(220,220,220)',
        'background':'rgba(225,225,225,0.7)',
    });
    $('.catalogCt').animate({
        padding:'15px'
    },500);
    $('.menu_cat').find('.poster_film p').css('font-size','12px');
    var cat_id = $(this).attr('data-cat-id');
    $('.menu_cat').css('border','none');
    $(this).css('border','5px solid #fbf501');
    $('.menu_cat').animate({
        width:'100',
        height:'100',
    },500,function(){
        $('.catalogSp').slideDown('fast',function(){
            
        });
    })
    data = {'cat':cat_id,'name':'catalog'};
    loadModule('.catalogSp',data,true);
});*/
</script>